本篇文章同步發表於 個人部落格 Jim's Blog
我們介紹完了內建的九種輸入元件,今天來講講其他的內建元件,這邊預計會分成四天來說,有些內建元件可能會需要用到一篇文章的篇幅來做介紹,例如 CascadingValue
、DynamicComponent
等等,以下正文開始
Blazor 建立專案時,就會建立 App.razor
其中使用 Router
元件設定用戶端路由
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
提供對應至目前瀏覽狀態的資料
專案建立時在驗證類型勾選 個別使用者帳戶
@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />
@code{
[Parameter] public string? Action { get; set; }
}
可以根據使用者是否取得授權來顯示不同的 UI 內容
<AuthorizeView>
<Authorized>
<h1>Hello, @context.User.Identity.Name!</h1>
<p>You can only see this content if you're authorized.</p>
<button @onclick="SecureMethod">Authorized Only Button</button>
</Authorized>
<NotAuthorized>
<h1>Authentication Failure!</h1>
<p>You're not signed in.</p>
</NotAuthorized>
</AuthorizeView>
@code {
private void SecureMethod() { ... }
}
<Authorized>
和 <NotAuthorized>
標籤的內容可以包含任意項目
如果沒有指定授權的條件,預設會使用 登入
登出
來做判斷
設計來處理例外情況的元件,用法類似 C# 的 try catch
在 MainLayout.razor
包裝內容
<div class="main">
<div class="content px-4">
<ErrorBoundary>
<ChildContent>
@Body
</ChildContent>
<ErrorContent>
<p class="errorUI">Nothing to see here right now. Sorry!</p>
</ErrorContent>
</ErrorBoundary>
</div>
</div>
如果設定在版面配置上,不管在哪一個頁面中出現錯誤,都會看到錯誤的 UI,實務上建議將錯誤的範圍縮小。
Recover
方法可以重設為非錯誤的狀態
今天講的元件中 ErrorBoundary
是比較需要深入的元件,錯誤處理是一件非常重要的事情,如果沒有處理好就會像這樣
行話稱為網站裸奔,如何做好錯誤攔截是需要特別注意的一件,明天會對 CascadingValue
元件做說明,主要的用途是將資料從上層的 Razor 元件
流向子系的元件